import React from 'react';
import type { MenuProps } from 'antd';
import { Menu } from 'antd';
import {RouterProp} from '../interface/index'
import { useNavigate } from 'react-router-dom';


type MenuItem = Required<MenuProps>['items'][number];

function getItem(
  label: React.ReactNode,
  key: React.Key,
  icon?: string,
  children?: MenuItem[],
): MenuItem {
  return {
    key,
    icon,
    children,
    label,
  } as MenuItem;
}

const data = JSON.parse(sessionStorage.getItem('routerData') as string)
const getPath = ()=>{
  let path = window.location.pathname
  let pathArr = path.split('/')
  if(pathArr.length <= 3){
    return path
  }
  path = `/${pathArr[1]}/${pathArr[2]}`  
  
  return path
}

const MenuSider = ()=>{
  let currentPath = getPath()
  let currentRoute = data.filter((item:RouterProp)=>{
    if(item.path === currentPath) return true
    return false
  })

  let navigator = useNavigate()
  const menuItem = currentRoute[0].children.map((item:RouterProp)=> {
    if(item.display === 1) return getItem(item.title, item.path)
    return false
  })
  
  const onClick: MenuProps['onClick'] = (e) => {
    navigator(e.key)
  };
  return (
    <>
    <div className='MenuHeader'>
      {currentRoute[0].title}
    </div>
    <Menu
      onClick={onClick}
      style={{ width: 256 }}
      defaultSelectedKeys={[window.location.pathname]}
      mode="inline"
      items={menuItem}
    />
    </>
  )
}


export default MenuSider